<template>
    <div class="flex min-h-[260px] border-b border-br-light">
        <!-- 左侧 -->
        <div class="layout-menu">
            <div
                v-for="(item, index) in menusList"
                :key="index"
                class="menu-item"
                :class="{ active: item.type === activeTab }"
                @click="activeTab = item.type"
            >
                {{ item.name }}
            </div>
        </div>

        <!-- 右侧 -->
        <div class="layout-main">
            <!-- 基础页面 -->
            <div v-if="activeTab === LinkTypeEnum.BASIC" class="link-lists">
                <div
                    v-for="(item, index) in linkList"
                    :key="index"
                    class="link-btn"
                    :class="{ active: activeLink.path === item.path && activeLink.name === item.name}"
                    @click="handleSelect(item)"
                >
                    {{ item.name }}
                </div>
            </div>
            <!-- 自定义链接 -->
            <div v-if="activeTab === LinkTypeEnum.CUSTOM" class="flex mt-4">
                <div class="mt-[5px]">自定义链接</div>
                <div class="ml-4 flex-1 min-w-[100px]">
                    <el-input
                        :model-value="modelValue.path"
                        placeholder="请输入链接地址"
                        @input="handleInput"
                    />
                    <div class="form-tips">
                        请填写完整的带有“https://”或“http://”的链接地址。
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { Link } from '.'
import { LinkTypeEnum, PcBasicLinks, H5BasicLinks  } from '.'

const props = defineProps({
    // Link对象
    modelValue: {
        type: Object as PropType<Link>,
        required: true
    },
    // 终端选择类型: [pc, h5]
    client: {
        type: String,
        default: 'pc'
    },
    // H5端的Tabbar
    isTabbar: {
        type: Boolean,
        default: false
    }
})

const emits = defineEmits<{
    (event: 'update:modelValue', value: any): void
}>()

// 菜单选项
const activeTab = ref<string>(LinkTypeEnum.BASIC)
const menusList = ref<any>([
    {
        name: '基础页面',
        type: LinkTypeEnum.BASIC,
        link: {}
    },
    {
        name: '自定义链接',
        type: LinkTypeEnum.CUSTOM,
        link: {}
    }
])

// 激活链接
const activeLink = computed({
    get() {
        return menusList.value.find(
            (item: any) => item.type === activeTab.value
        )?.link as Link
    },
    set(value) {
        menusList.value.forEach((item: any) => {
            if (item.type === activeTab.value) {
                item.link = value
            }
        })
    }
})

// 链接列表
const linkList = computed(() => {
    if (props.client === 'pc') {
        return PcBasicLinks
    }
    return H5BasicLinks
})

/**
 * 链接选择
 *
 * @param value
 * @author zero
 */
const handleSelect = (value: any) => {
    emits('update:modelValue', value)
}

/**
 * 链接填写
 *
 * @param value
 * @author zero
 */
const handleInput = (value: string) => {
    emits('update:modelValue', {
        type: LinkTypeEnum.CUSTOM,
        path: value
    })
}

watch(
    () => props.modelValue,
    (value) => {
        activeTab.value = value.type
        activeLink.value = value
    },
    {
        immediate: true
    }
)
</script>

<style scoped lang="scss">
.layout-menu {
    width: 130px;
    padding: 10px;
    border-right: 1px solid var(--el-border-color-light);
    flex-shrink: 0;
    .menu-item {
        border-radius: 4px;
        padding: 6px 10px;
        margin-bottom: 8px;
        cursor: pointer;
        &.active {
            color: var(--el-color-primary);
            background-color: var(--el-color-primary-light-9);
        }
        &:hover:not(.active) {
            background-color: var(--el-bg-color-page);
        }
    }
}

.layout-main {
    padding: 15px;
    .link-lists {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        .link-btn {
            border: 1px solid var(--el-border-color);
            border-radius: 3px;
            cursor: pointer;
            padding: 5px 20px;
            &.active {
                color: var(--el-color-primary);
                border-color: var(--el-color-primary);
            }
        }
    }
}
</style>